import React from 'react';
import { history } from 'umi';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Card, Col, Row } from 'antd';
import styles from './Welcome.less';

const {Meta} = Card;

export default () => {
  const go = (value) => {
    history.push({
      pathname: "/resource",
      query: {
        type: value
      }
    })
  }

  return (
    <PageContainer title={false}>
      <div className={styles.container}>
        <Row gutter={16}>
          <Col span={6}>
            <Button type="link" onClick={() => {
              go('docx')
            }}>
              <Card
                bordered={false}
                cover={<img alt="文档" src="./img/word.png"/>}
              >
                <Meta title="文档"/>
              </Card>
            </Button>
          </Col>
          <Col span={6}>
            <Button type="link" onClick={() => {
              go('xlsx')
            }}>
              <Card
                bordered={false}
                cover={<img alt="表格" src="./img/excel.png"/>}
              >
                <Meta title="表格"/>
              </Card>
            </Button>
          </Col>
          <Col span={6}>
            <Button type="link" onClick={() => {
              go('pptx')
            }}>
              <Card
                bordered={false}
                cover={<img alt="演示文稿" src="./img/pptx.png"/>}
              >
                <Meta title="演示文稿"/>
              </Card>
            </Button>
          </Col>
          <Col span={6}>
            <Button type="link" onClick={() => {
              go('docx')
            }}>
              <Card
                bordered={false}
                cover={<img alt="文集" src="./img/docs.png"/>}
              >
                <Meta title="文集"/>
              </Card>
            </Button>
          </Col>
        </Row>
      </div>
    </PageContainer>
  );
};
